import React from "react";
import "../../index.css";

class Splist extends React.Component{
  state = {
    splist: []
  }
  render(){
    return(
      <div>
        <div className="splist">
          <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[0]['imgSrc']} alt="" /></a>
        </div>
          <div className="splist-shps">
            <div className="top">
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[1]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[2]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[3]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[4]['imgSrc']} alt="" /></a>
            </div>
            <div className="bottom">
              <p>￥66</p>
              <p>￥66</p>
              <p>￥66</p>
              <p>￥66</p>
            </div>
          </div>

          <div className="splist">
            <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[0]['imgSrc']} alt="" /></a>
        </div>
          <div className="splist-shps">
            <div className="top">
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[1]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[2]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[3]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[4]['imgSrc']} alt="" /></a>
            </div>
            <div className="bottom">
              <p>￥66</p>
              <p>￥66</p>
              <p>￥66</p>
              <p>￥66</p>
            </div>
          </div>

          <div className="splist">
            <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[0]['imgSrc']} alt="" /></a>
        </div>
          <div className="splist-shps">
            <div className="top">
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[1]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[2]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[3]['imgSrc']} alt="" /></a>
              <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[4]['imgSrc']} alt="" /></a>
            </div>
            <div className="bottom">
              <p>￥66</p>
              <p>￥66</p>
              <p>￥66</p>
              <p>￥66</p>
            </div>
          </div>

          <div className="splist2">
            <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[0]['imgSrc']} alt="" /></a>
          </div>
          <div className="spxx">
            <p><span>全场两折起</span>  里美护肤专场</p>
          </div>

          <div className="splist2">
            <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[0]['imgSrc']} alt="" /></a>
          </div>
          <div className="spxx">
            <p><span>全场两折起</span>  里美护肤专场</p>
          </div>

          <div className="splist2">
            <a href="#"><img src={this.state.splist.length > 0 && this.state.splist[0]['imgSrc']} alt="" /></a>
          </div>
          <div className="spxx">
            <p><span>全场两折起</span>  里美护肤专场</p>
          </div>
      </div>
      
    )
  }
  componentDidMount() {
    fetch('http://localhost:3000/home', {
      headers: {
        "Content-Type" : "application/json"
      }
    })
    .then(response => {
      return response.json()
    })
    .then(res => {
      this.setState({
        splist: res.brands
      })
    })
  }
};

export default Splist;